<template>
  <!-- 问题二级分类表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    :width="'900px'"
    draggable
    @close="closeDialog"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <div
        style="
          width: 900px;
          background-color: #fff;
          margin-top: 20px;
          padding: 20px;
          overflow: auto;
          max-height: 900px;
        "
      >
        <!-- <div class="dialog-footer">
        <el-button type="primary" @click="startPrint">打印</el-button>
        <el-button type="primary" @click="PDFprit">下载报告</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div> -->
        <div id="printBox" v-loading="loading">
          <!-- 循环生成第几页 page-break为打印分页标识-->
          <!-- <div
          v-for="(pageItem, pageIndex) in printDataList"
          :key="pageItem?.id"
          class="page-break"
        > -->

          <div
            style="padding: 20px 0; margin: 0 10px; position: relative"
            ref="tableAll"
            id="table1"
          >
            <img
              src="@/assets/images/jtImage.png"
              width="150"
              style="position: absolute; left: 20px; top: 5px"
            />
            <div
              style="
                font-size: 22px;
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
              "
            >
              <div class="box1">
                <span> Dalian Giantech Automobile Parts Co., Ltd.</span>
                <span> X光探伤</span>
                <span> X-ray detection</span>
              </div>
            </div>

            <!-- 送货单基本信息 -->
            <div
              style="
                display: flex;
                margin-bottom: 2px;
                font-size: 16px;
                font-weight: 400;
                color: #6e7073;
              "
            >
              <div style="flex: 1"></div>
              <div style="flex: 1">
                <div style="text-align: right">NO:{{ formData.No }}</div>
              </div>
            </div>
            <table
              border="1"
              cellpadding="0"
              cellspacing="0"
              align="center"
              class="dashed-border"
            >
              <colgroup>
                <col width="120" />
                <col width="120" />
                <col width="120" />
                <col width="120" />
                <col width="120" />
                <col width="120" />
              </colgroup>
              <tbody>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>报告编号</div>
                      <div>Supplier</div>
                    </div>
                  </td>
                  <td colspan="5">
                    <div class="box1" style="font-size: 16px">
                      {{ formData?.reportCode || "" }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>客户</div>
                      <div>Customer</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.customerName || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>产品图号</div>
                      <div>Drawing No.</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.materialDrawingNo || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>零件名称</div>
                      <div>Part Name</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.materialName || "" }}
                  </td>
                </tr>

                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>材质</div>
                      <div>Material</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.materialQuality || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>产品批号</div>
                      <div>Product No.</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.materialBatch || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>设备型号</div>
                      <div>Equipment</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.deviceType || "" }}
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>检测标准</div>
                      <div>Testing standards</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.checkLevel || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>管电压</div>
                      <div>Voltage</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.voltage || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>管电流</div>
                      <div>Electric current</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.electric || "" }}
                  </td>
                </tr>

                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>分辨率</div>
                      <div>Resolution</div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.resolution || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>像质计型号</div>
                      <div style="word-wrap: break-word">
                        Image quality meter
                      </div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.imageQualityMeter || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>像质计灵敏度</div>
                      <div style="word-wrap: break-word">
                        Image quality meter sensitivity
                      </div>
                    </div>
                  </td>
                  <td colspan="1">
                    {{ formData?.imageQualitySensi || "" }}
                  </td>
                </tr>
                <tr style="height: 200px">
                  <td colspan="1">
                    <div class="box1">
                      <div>验收标准</div>
                    </div>
                  </td>
                  <td colspan="5">
                    {{ formData?.acceptanceCriteria || "" }}
                  </td>
                </tr>
                <tr style="height: 100px">
                  <td colspan="1">
                    <div class="box1">
                      <div>验收结论</div>
                    </div>
                  </td>
                  <td colspan="5">
                    {{ formData?.acceptanceConclusion || "" }}
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>位置</div>
                    </div>
                  </td>
                  <td colspan="4">
                    <div class="box1">
                      <div>图片</div>
                    </div>
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>验收结果</div>
                    </div>
                  </td>
                </tr>
                <tr
                  v-for="(item, index) in formData?.checkOrderDetails"
                  :key="index"
                >
                  <td colspan="1">
                    <div>
                      {{ item.sopItemName || "" }}
                    </div>
                  </td>
                  <td colspan="4">
                    <!-- <el-row class="ml-[15px]">
                  <CommonUploadFile
                    :isRead="true"
                    :files="item.image || []"
                    :showText="false"
                  />
                </el-row> -->
                    <span v-for="(item1, index) in item.images" :key="index">
                      <img
                        :src="`${upPreviewUrl}${item1.url}`"
                        style="
                          width: 100px;
                          height: 100px;
                          margin-right: 10px;
                          cursor: pointer;
                        "
                        @click="
                          handlePictureCardPreview(
                            `${upPreviewUrl}${item1.url}`
                          )
                        "
                        alt=""
                      />
                    </span>
                  </td>
                  <td colspan="1">
                    <div>
                      {{ item.sopItemValue || "" }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>检验员</div>
                      <div>Inspector</div>
                    </div>
                  </td>
                  <td colspan="2">
                    {{ formData?.inspector || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>核准签发</div>
                      <div>Review</div>
                    </div>
                  </td>
                  <td colspan="2">
                    {{ formData?.approveUserName || "" }}
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="box1">
                      <div>检验日期</div>
                      <div>Date</div>
                    </div>
                  </td>
                  <td colspan="2">
                    {{ formData?.inspectDate || "" }}
                  </td>
                  <td colspan="1">
                    <div class="box1">
                      <div>审核签发日期</div>
                      <div>DateDate</div>
                    </div>
                  </td>
                  <td colspan="2">
                    {{ formData?.approveDate || "" }}
                  </td>
                </tr>
              </tbody>
            </table>

            <!-- 信息提示区域 -->
          </div>
          <!-- </div> -->
        </div>
      </div>

      <!-- <el-card>
      <el-row>
        <el-button @click="previewPDF">预览 PDF</el-button>
        <el-button @click="exportPDF">导出 PDF</el-button>
      </el-row>

      <div id="pdf-content" ref="pdfContent">
        <h2>PDF 示例内容</h2>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="名称">示例数据</el-descriptions-item>
          <el-descriptions-item label="日期">2024-12-18</el-descriptions-item>
        </el-descriptions>
      </div>

      <el-dialog v-model="pdfPreviewDialog" title="PDF 预览" width="60%">
        <div v-if="pdfPreviewUrl" style="height: 600px">
          <embed
            :src="pdfPreviewUrl"
            type="application/pdf"
            style="width: 100%; height: 100%"
          />
        </div>
        <div v-else>正在生成预览，请稍候...</div>
      </el-dialog>
    </el-card> -->

      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="startPrint">打印</el-button>
          <el-button type="primary" @click="PDFprit">下载报告</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template> -->
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import dayjs from "dayjs";
import html2pdf from "../../XrayInspectionReport/components/PDFs";
import html2pdfs from "html2pdf.js";
import printJS from "print-js";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "Q8dqualityWorkorderPrint",
  inheritAttrs: false,
});

const emit = defineEmits(["change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

watch(
  () => props.data,
  (newVal: any) => {
    if (newVal?.id) {
      getDetail();
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

const loading = ref(false);

// 时间转换
function formatDate(dateString: string | number | Date) {
  if (dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}年${month}月${day}日`;
  } else {
    return `   年  月  日`;
  }
}

const uploadApi = import.meta.env.VITE_APP_BASE_API;
// 预览url前缀
const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;

const handlePictureCardPreview = (url: string) => {
  url = url?.replace("fileCenter/download/", "fileCenter/preview/");
  window.open(url);
};

const tableAll = ref(null);
function PDFprit() {
  let tableAll1 = tableAll.value;
  let title = "X光检验报告";

  // html2pdf(table, {
  //   background: "#fff",
  //   minimumUnit: "tr",
  //   orientation: "l",
  // });
  html2pdf("table1", title, dayjs(new Date()).format("YYYY-MM-DD"));
  // console.log("printData.value", tableAll.value.scrollWidth);

  // generatePdf(tableAll.value, "报告标题");
}

// 打印数据
const printData = ref<any>();

const getDetail = async () => {
  loading.value = true;
  console.log("props.id", props.data.id);
  await request({
    url: `/qms/qmsreportrecord/get/${props.data.id}`,
    method: "get",
    data: {},
  })
    .then((res) => {
      if (res.data != null) {
        // Object.assign(formData, res.data);
        Object.assign(formData, formDatas);

        loading.value = false;
      } else {
        loading.value = false;
      }
    })
    .finally(() => {
      loading.value = false;
    });

  // setTimeout(() => {
  //   printData.value = mock;
  //   loading.value = false;
  // }, 500);
};

// 开始打印
function startPrint() {
  // 开始打印
  setTimeout(() => {
    printJS({
      printable: "printBox", // 打印内容的容器 id
      type: "html", // 打印类型
      imageStyle: "width:100%;margin-bottom:20px;",
      scanStyles: false,
      style: `
      @media print {
        @page {
          margin: 8mm 5mm;
        }
        body {
          margin: 0;
        }
        .page-break {
          page-break-before: always;
        }
        .dashed-border {
          width: 100%;
          border-collapse: collapse; /* 使边框合并为单一边框 */
          border: 1px solid #333;
        }

        .dashed-border td,
        .dashed-border th {
          font-size: 14px;
          border: 1px solid #333;
          min-height: 30px;
          padding: 5px 7px;
          overflow-wrap: anywhere;
          line-height: 24px;
          word-break: break-all;
        }

        tr {
          page-break-inside: avoid;
        }

        .bold td {
          font-weight: 600;
        }
      }
    `,
    });
  }, 1000);
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
  restForm();
});
const restForm = () => {
  formData.reportRecordId = "";
  formData.reportCategory = "";
  formData.reportCode = "";
  formData.customerName = "";
  formData.materialDrawingNo = "";
  formData.materialCode = "";
  formData.materialName = "";
  formData.materialQuality = "";
  formData.materialBatch = "";
  formData.deviceType = "";
  formData.checkLevel = "";
  formData.voltage = "";
  formData.electric = "";
  formData.resolution = "";
  formData.imageQualityMeter = "";
  formData.imageQualitySensi = "";
  formData.inspector = "";
  formData.inspectDate = "";
  formData.approveUserName = "";
  formData.approveDate = null;
  formData.checkOrderDetails = [];
  formData.images = [];
  formData.acceptanceConclusion = null;
  formData.acceptanceCriteria = null;
  formData.comprehensiveJudgment = "";
};
// 模拟数据
const formDatas = reactive({
  reportRecordId: "1881272861287157762",
  reportCategory: "1",
  reportCode: "202501200001",
  customerName: "客户名称1",
  materialDrawingNo: "图号01",
  materialCode: "FDJ01",
  materialName: "0709",
  materialQuality: "个",
  materialBatch: "B000002",
  deviceType: "",
  checkLevel: "1",
  voltage: "2",
  electric: "3",
  resolution: "4",
  imageQualityMeter: "5",
  imageQualitySensi: "6",
  inspector: "管理员",
  inspectDate: "2025-01-06 15:32:30",
  approveUserName: "",
  approveDate: null,
  checkOrderDetails: [
    {
      id: "1873625517892796418",
      createTime: "2024-12-30 15:01:48",
      lastUpdateTime: "2024-12-30 15:01:48",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "599057500f374472aa50dc0f77d7dde4",
      seq: null,
      sopItemId: "1860988675896868866",
      sopItemName: "001",
      sopItemValue: "6",
      sopItemValueId: null,
      sopItemResult: "1",
      sopItemStandard: "1-10",
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "001",
      standardMaxValue: "10",
      standardMinValue: "1",
      standardValue: "1",
      sopItemMethod: "001",
      sopItemPosition: "001",
    },
    {
      id: "1873625517892796419",
      createTime: "2024-12-30 15:01:48",
      lastUpdateTime: "2024-12-30 15:01:48",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "599057500f374472aa50dc0f77d7dde4",
      seq: null,
      sopItemId: "1867483392327184386",
      sopItemName: "002",
      sopItemValue: "123",
      sopItemValueId: null,
      sopItemResult: "1",
      sopItemStandard: null,
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "002",
      standardMaxValue: "",
      standardMinValue: "",
      standardValue: "2",
      sopItemMethod: "002",
      sopItemPosition: "002",
    },
    {
      id: "1876169957035343873",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861213185245843457",
      sopItemName: "test01",
      sopItemValue: "666",
      sopItemValueId: null,
      sopItemResult: null,
      sopItemStandard: null,
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "test01",
      standardMaxValue: "",
      standardMinValue: "",
      standardValue: "1",
      sopItemMethod: "test01",
      sopItemPosition: "test01",
    },
    {
      id: "1876169957035343874",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861328948988473346",
      sopItemName: "test02",
      sopItemValue: "6",
      sopItemValueId: null,
      sopItemResult: "1",
      sopItemStandard: "1-10",
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "test02",
      standardMaxValue: "10",
      standardMinValue: "1",
      standardValue: "1",
      sopItemMethod: "test02",
      sopItemPosition: "test02",
    },
    {
      id: "1876169957035343875",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861329053766381570",
      sopItemName: "test03",
      sopItemValue: "5",
      sopItemValueId: null,
      sopItemResult: null,
      sopItemStandard: null,
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "test03",
      standardMaxValue: "",
      standardMinValue: "",
      standardValue: "2",
      sopItemMethod: "test03",
      sopItemPosition: "test03",
    },
    {
      id: "1876169957043732482",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861968628205461506",
      sopItemName: "test04",
      sopItemValue: "1",
      sopItemValueId: null,
      sopItemResult: null,
      sopItemStandard: null,
      sopStandardId: null,
      ids: null,
      images: [],
      sopItem: null,
      sopItemCode: "test04",
      standardMaxValue: "",
      standardMinValue: "",
      standardValue: "2",
      sopItemMethod: "test04",
      sopItemPosition: "test04",
    },
    {
      id: "1876169957043732483",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861968796854231042",
      sopItemName: "test05",
      sopItemValue: "5",
      sopItemValueId: null,
      sopItemResult: null,
      sopItemStandard: null,
      sopStandardId: null,
      ids: null,
      images: [
        {
          id: "1861213255815008261",
          createTime: "2024-11-26 08:59:55",
          lastUpdateTime: "2024-11-26 08:59:55",
          createdUserId: "1",
          lastUpdatedUserId: "1",
          createdUserName: "管理员",
          lastUpdatedUserName: "管理员",
          version: 1,
          pointCheckDetailId: "1876169957043732483",
          fileType: "jpg",
          path: "test/info",
          originalfilename: "1731028704250.jpg",
          filename: "1861213183990173696.jpg",
          url: "test/info/1861213183990173696.jpg",
          remarks: null,
          enabled: null,
          deleted: 0,
          ids: null,
        },
      ],
      sopItem: null,
      sopItemCode: "test05",
      standardMaxValue: "",
      standardMinValue: "",
      standardValue: "2",
      sopItemMethod: "test05",
      sopItemPosition: "test05",
    },
    {
      id: "1876169957043732484",
      createTime: "2025-01-06 15:32:30",
      lastUpdateTime: "2025-01-06 15:32:30",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      orderId: "b7572ea70c1c48e69c1a132ba689ac77",
      seq: null,
      sopItemId: "1861968914890334209",
      sopItemName: "test06",
      sopItemValue: "6",
      sopItemValueId: null,
      sopItemResult: "0",
      sopItemStandard: "3-4u",
      sopStandardId: null,
      ids: null,
      images: [
        {
          id: "1861213255815008259",
          createTime: "2024-11-26 08:59:55",
          lastUpdateTime: "2024-11-26 08:59:55",
          createdUserId: "1",
          lastUpdatedUserId: "1",
          createdUserName: "管理员",
          lastUpdatedUserName: "管理员",
          version: 1,
          pointCheckDetailId: "1876169957043732484",
          fileType: "jpg",
          path: "test/info",
          originalfilename: "1731028704250.jpg",
          filename: "1861213183990173696.jpg",
          url: "test/info/1861213183990173696.jpg",
          remarks: null,
          enabled: null,
          deleted: 0,
          ids: null,
        },
        {
          id: "1861213255815008269",
          createTime: "2024-11-26 08:59:55",
          lastUpdateTime: "2024-11-26 08:59:55",
          createdUserId: "1",
          lastUpdatedUserId: "1",
          createdUserName: "管理员",
          lastUpdatedUserName: "管理员",
          version: 1,
          pointCheckDetailId: "1876169957043732484",
          fileType: "jpg",
          path: "test/info",
          originalfilename: "1731028704250.jpg",
          filename: "1861213183990173696.jpg",
          url: "test/info/1861213183990173696.jpg",
          remarks: null,
          enabled: null,
          deleted: 0,
          ids: null,
        },
      ],
      sopItem: null,
      sopItemCode: "test06",
      standardMaxValue: "4",
      standardMinValue: "3",
      standardValue: "1",
      sopItemMethod: "test06",
      sopItemPosition: "test06",
    },
  ],
  images: [
    {
      id: "1861213255815008261",
      createTime: "2024-11-26 08:59:55",
      lastUpdateTime: "2024-11-26 08:59:55",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      pointCheckDetailId: "1876169957043732483",
      fileType: "jpg",
      path: "test/info",
      originalfilename: "1731028704250.jpg",
      filename: "1861213183990173696.jpg",
      url: "test/info/1861213183990173696.jpg",
      remarks: null,
      enabled: null,
      deleted: 0,
      ids: null,
    },
    {
      id: "1861213255815008259",
      createTime: "2024-11-26 08:59:55",
      lastUpdateTime: "2024-11-26 08:59:55",
      createdUserId: "1",

      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      pointCheckDetailId: "1876169957043732484",
      fileType: "jpg",
      path: "test/info",
      originalfilename: "1731028704250.jpg",
      filename: "1861213183990173696.jpg",
      url: "test/info/1861213183990173696.jpg",
      remarks: null,
      enabled: null,
      deleted: 0,
      ids: null,
    },
    {
      id: "1861213255815008269",
      createTime: "2024-11-26 08:59:55",
      lastUpdateTime: "2024-11-26 08:59:55",
      createdUserId: "1",
      lastUpdatedUserId: "1",
      createdUserName: "管理员",
      lastUpdatedUserName: "管理员",
      version: 1,
      pointCheckDetailId: "1876169957043732484",
      fileType: "jpg",
      path: "test/info",
      originalfilename: "1731028704250.jpg",
      filename: "1861213183990173696.jpg",
      url: "test/info/1861213183990173696.jpg",
      remarks: null,
      enabled: null,
      deleted: 0,
      ids: null,
    },
  ],
  acceptanceConclusion: null,
  acceptanceCriteria: null,
  comprehensiveJudgment: "0",
});
const formData = reactive({
  reportRecordId: "",
  reportCategory: "",
  reportCode: "",
  customerName: "",
  materialDrawingNo: "",
  materialCode: "",
  materialName: "",
  materialQuality: "",
  materialBatch: "",
  deviceType: "",
  checkLevel: "",
  voltage: "",
  electric: "",
  resolution: "",
  imageQualityMeter: "",
  imageQualitySensi: "",
  inspector: "",
  inspectDate: "",
  approveUserName: "",
  approveDate: null,
  checkOrderDetails: [
    // {
    //   id: "",
    //   createTime: "",
    //   lastUpdateTime: "",
    //   createdUserId: "",
    //   lastUpdatedUserId: "",
    //   createdUserName: "",
    //   lastUpdatedUserName: "",
    //   version: null,
    //   orderId: "",
    //   seq: null,
    //   sopItemId: "",
    //   sopItemName: "",
    //   sopItemValue: "",
    //   sopItemValueId: null,
    //   sopItemResult: null,
    //   sopItemStandard: null,
    //   sopStandardId: null,
    //   ids: null,
    //   images: [],
    //   sopItem: null,
    //   sopItemCode: "",
    //   standardMaxValue: "",
    //   standardMinValue: "",
    //   standardValue: "",
    //   sopItemMethod: "",
    //   sopItemPosition: "",
    // },
  ],
  images: [],
  acceptanceConclusion: null,
  acceptanceCriteria: null,
  comprehensiveJudgment: "",
});

const pdfContent = ref(null);
const pdfPreviewDialog = ref(false);
const pdfPreviewUrl = ref(null);

const exportPDF = () => {
  // 同上述代码
};

const previewPDF = () => {
  const element = pdfContent.value;

  if (!element) {
    console.error("Error: pdfContent is not defined or not bound to the DOM.");
    return;
  }

  const container = document.getElementById("pdf-content");
  if (!container) {
    console.error("Error: #pdf-content element not found in the DOM.");
    return;
  }

  container.classList.add("export");

  pdfPreviewDialog.value = true;
  pdfPreviewUrl.value = null;

  const options = {
    margin: [10, 10],
    image: { type: "jpeg", quality: 1 },
    html2canvas: { scale: 3 },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
  };

  html2pdfs()
    .from(element)
    .set(options)
    .toPdf()
    .get("pdf")
    .then((pdf) => {
      const pdfBlob = pdf.output("blob");
      pdfPreviewUrl.value = URL.createObjectURL(pdfBlob);
    })
    .finally(() => {
      container.classList.remove("export");
    });
};
</script>
<style lang="scss" scoped>
.app-container {
  height: inherit;
  overflow: scroll;
  padding: 0;
}

:deep(.printDialog .el-dialog__body) {
  padding: 10px !important;
  height: calc(100vh - 220px);
  overflow: scroll;
}

.dashed-border {
  width: 100%;
  border-collapse: collapse; /* 使边框合并为单一边框 */
  border: 1px solid #606266;
}

.dashed-border td,
.dashed-border th {
  color: #6e7073;
  font-size: 14px;
  border: 1px solid #606266;
  min-height: 30px;
  padding: 5px 7px;
  overflow-wrap: anywhere;
  line-height: 24px;
  word-break: break-all;
}

tr {
  page-break-inside: avoid;
}

.bold td {
  font-weight: 600;
}

.box1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  // color: #000;
}
</style>
